/*
 * @Author: funlee
 * @Email: i@funlee.cn
 * @Date: 2019-06-20 16:47:56
 * @Description: 首页-控制台-管控预警
 */
import React from "react";
import "./style.scss";
import { observer, inject } from "mobx-react";
import { openDetail } from "@/utils/util";

@inject("ConsoleWarningStore")
@observer
class ConsoleWarning extends React.Component {
    componentDidMount() {
        this.props.ConsoleWarningStore.getData();
    }
    topDataMatchIcon(topData) {
        const data = [
            { name: "预警总数量", icon: "yjzsl", value: 0 },
            { name: "今日预警数量", icon: "jryjsl", value: 0 },
            { name: "APP数量", icon: "appsl", value: 0 },
            { name: "人员预警数量", icon: "ryyjsl", value: 0 }
        ];
        topData.forEach(d => {
            data.forEach(item => {
                if (item.name === d.name) {
                    item.value = d.value;
                }
            });
        });
        return data;
    }

    render() {
        const { topData, listData } = this.props.ConsoleWarningStore;
        const renderTopData = this.topDataMatchIcon(topData);
        return (
            <div className="console-warning">
                <h3 className="common-title">我的管控今日预警</h3>
                <ul className="top-num-list">
                    {renderTopData.map(d => (
                        <li key={d.icon}>
                            <i className={`icon ${d.icon}-icon`} />
                            <div className="detail">
                                <p className="value">{d.value}</p>
                                <p className="name">{d.name}</p>
                            </div>
                        </li>
                    ))}
                </ul>
                <h3 className="common-title">今日预警</h3>
                <ul className="lists-data">
                    {listData.map((d, index) => (
                        <li key={`list-${index}`}>
                            <img className="list-img" src={d.logo} />
                            <div className="detail">
                                <p className="first">
                                    <span className="name" onClick={() => openDetail(d.id)}>
                                        {d.name}
                                    </span>
                                    <span>来源：{d.source}</span>
                                    <span>预警时间：{d.time}</span>
                                </p>
                                <p>{d.text}</p>
                            </div>
                        </li>
                    ))}
                </ul>
            </div>
        );
    }
}

export default ConsoleWarning;
